<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
			</el-switch>
			<hr />

			<el-switch v-model="value1_1" active-text="按月付费" inactive-text="按年付费">
			</el-switch>
			<el-switch style="display: block" v-model="value1_2" active-color="#13ce66" inactive-color="#ff4949"
				active-text="按月付费" inactive-text="按年付费">
			</el-switch>
			<hr />

			<el-tooltip :content="'Switch value: ' + value" placement="top">
				<el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949" active-value="100"
					inactive-value="0">
				</el-switch>
			</el-tooltip>
			<hr />

			<el-switch v-model="value2_1" disabled>
			</el-switch>
			<el-switch v-model="value2_2" disabled>
			</el-switch>
		</div>
	</body>

	<script>
		new Vue({
			el: "#app",
			data: {
				value: true,
				value1_1: true,
				value1_2: true,
				value2: '100',
				value2_1: true,
				value2_2: false
			}
		})
	</script>

</html>